<!DOCTYPE html>
<html lang="en">

<head>
    <title>Health Management Platform</title>
    <meta name="comp2800 template" content="My 2800 App">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --primary-color: #165DFF;
            --secondary-color: #36BFFA;
            --accent-color: #36D399;
            --warning-color: #FF9F43;
            --danger-color: #FF5C5C;
            --neutral-color: #334155;
            --light-color: #F8FAFC;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #F8FAFC;
            color: var(--neutral-color);
        }

        .card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }

        .card-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            border-radius: 1rem 1rem 0 0 !important;
            padding: 1.2rem 1.5rem;
            font-weight: 600;
            font-size: 1.1rem;
        }

        .card-body {
            padding: 1.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: none;
            padding: 0.7rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(22, 93, 255, 0.3);
        }

        .form-control {
            border-radius: 0.5rem;
            padding: 0.7rem 1rem;
            border: 1px solid #E2E8F0;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.2);
            outline: none;
        }

        .list-group-item {
            border: none;
            border-radius: 0.5rem;
            margin-bottom: 0.5rem;
            padding: 0.8rem 1rem;
            background-color: #F1F5F9;
            transition: background-color 0.3s ease;
        }

        .list-group-item:hover {
            background-color: #E2E8F0;
        }

        .form-range {
            height: 0.5rem;
            border-radius: 0.25rem;
            background-color: #E2E8F0;
        }

        .form-range::-webkit-slider-thumb {
            background: var(--primary-color);
            transition: all 0.3s ease;
        }

        .form-range::-webkit-slider-thumb:hover {
            box-shadow: 0 0 0 8px rgba(22, 93, 255, 0.1);
        }

        .bmi-result {
            padding: 1rem;
            border-radius: 0.5rem;
            font-weight: 500;
            text-align: center;
        }

        .bmi-normal {
            background-color: rgba(54, 211, 153, 0.1);
            color: #059669;
        }

        .bmi-overweight {
            background-color: rgba(255, 159, 67, 0.1);
            color: #EA580C;
        }

        .bmi-obese {
            background-color: rgba(255, 92, 92, 0.1);
            color: #DC2626;
        }

        .bmi-underweight {
            background-color: rgba(54, 191, 250, 0.1);
            color: #0284C7;
        }

        .heart-rate-display {
            position: relative;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .heart-rate-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .heart-icon {
            color: var(--danger-color);
            animation: pulse 1.5s infinite;
            margin-left: 0.5rem;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(1);
            }
        }

        .stats-card {
            background-color: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 1.5rem;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.3rem;
        }

        .stat-label {
            font-size: 0.9rem;
            color: #64748B;
        }

        .progress-ring {
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
            transition: all 1s ease;
        }

        .progress-ring-circle {
            stroke-dasharray: 283;
            stroke-dashoffset: 283;
            stroke-width: 8;
            stroke: var(--primary-color);
            fill: transparent;
            transition: stroke-dashoffset 1s ease;
        }

        .hero-banner {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 4rem 0;
            border-radius: 1.5rem;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
        }

        .hero-banner::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-image: url("https://picsum.photos/id/177/800/400");
            background-size: cover;
            background-position: center;
            opacity: 0.1;
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .hero-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }

        .health-tips {
            margin-top: 3rem;
        }

        .health-tip {
            background-color: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 1.5rem;
            transition: transform 0.3s ease;
        }

        .health-tip:hover {
            transform: translateY(-5px);
        }

        .tip-icon {
            font-size: 1.8rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .tip-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .tip-content {
            color: #64748B;
        }

        .navbar {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        .navbar-brand {
            display: flex;
            align-items: center;
        }

        .navbar-brand img {
            margin-right: 0.5rem;
        }

        .footer {
            background-color: #f8f9fa;
            border-top: 1px solid #e9ecef;
        }

        .nav-link {
            position: relative;
            transition: all 0.3s ease;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .btn {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .stats-card {
            position: relative;
            overflow: hidden;
        }

        .stats-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }

        .card-header i {
            margin-right: 0.5rem;
        }

        .health-goal {
            margin-bottom: 1.5rem;
        }

        .goal-title {
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .goal-progress {
            height: 0.5rem;
            background-color: #E2E8F0;
            border-radius: 0.25rem;
            overflow: hidden;
        }

        .goal-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            transition: width 1s ease;
        }

        .navbar {
            background-color: lightskyblue;
            /* 导航栏背景色 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        .navbar-brand {
            display: flex;
            /* 弹性布局，用于水平排列logo和标题 */
            align-items: center;
            /* 垂直居中 */
        }

        .navbar-brand span {
            font-weight: 600;
            /* 标题字体加粗 */
            margin-left: 0.5rem;
            /* 标题与logo间距 */
        }

        .navbar-nav .nav-link {
            /* 继承Bootstrap默认样式，无额外自定义样式 */
        }

        .navbar-nav .nav-link.active {
            /* Bootstrap默认激活状态样式 */
        }

        .btn-outline-success {
            /* 继承Bootstrap按钮样式 */
        }

        footer {
            background-color: #212529;
            /* 深灰色背景（bg-dark类对应Bootstrap默认色） */
            color: white;
            /* 文本颜色 */
            padding: 1rem 0;
            /* 垂直内边距 */
            text-align: center;
            /* 内容居中 */
        }

        footer .container {
            /* 继承Bootstrap容器样式 */
        }

        footer p {
            margin-bottom: 0.5rem;
            /* 版权文本底部间距 */
        }

        footer .mt-2 {
            margin-top: 0.5rem;
            /* 图标区域顶部间距 */
        }

        footer a {
            color: white;
            /* 图标链接颜色 */
            margin: 0 0.5rem;
            /* 图标左右间距 */
            transition: color 0.3s;
            /* 鼠标悬停动画过渡 */
        }

        footer a:hover {
            color: #007bff;
            /* 鼠标悬停时变为蓝色（可自定义） */
        }
    </style>
</head>

<body>
    <!-- Custom Navbar -->
    <!-- Navbar Optimization -->
    <nav class="navbar navbar-expand-lg navbar-light"
        style="background-color: lightskyblue; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="../images/biaoti.png" height="36" alt="Health Bot Logo">
                <span class="ms-2" style="font-weight: 600;">Health Bot</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="../aboutus.html">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../main.html">Health</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../history.html">History</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../delete_user.html">Delete</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../profile.html">Profile</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <a class="btn btn-outline-success" href="../login.html">
                        <i class="fa fa-sign-out mr-1"></i> Logout
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="container mt-5 mb-5">
        <div class="hero-banner">
            <div class="container hero-content">
                <h1 class="hero-title">Health Management Platform</h1>
                <p class="hero-subtitle">Comprehensively manage your health data and protect your well-being</p>
                <a href="#health-tracker" class="btn btn-light text-primary">
                    <i class="fa fa-heartbeat mr-2"></i>Start Health Tracking
                </a>
            </div>
        </div>

        <!-- Health Overview -->
        <div class="row mb-5" id="health-tracker">
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="stats-card">
                    <div class="stat-value" id="bmiDisplay">-</div>
                    <div class="stat-label">BMI Index</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="stats-card">
                    <div class="stat-value" id="workoutCount">0</div>
                    <div class="stat-label">Weekly Workouts</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="stats-card">
                    <div class="stat-value" id="sleepAvg">-</div>
                    <div class="stat-label">Average Sleep</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="stats-card">
                    <div class="heart-rate-display">
                        <div class="heart-rate-value" id="heartRateDisplay">70</div>
                        <i class="fa fa-heart heart-icon"></i>
                    </div>
                    <div class="stat-label">Current Heart Rate (bpm)</div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Left Content -->
            <div class="col-lg-8">
                <!-- Body Measurements -->
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fa fa-balance-scale mr-2"></i>Body Measurements
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="height" class="form-label">Height (cm)</label>
                                    <input type="number" class="form-control" id="height" placeholder="Enter height">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="weight" class="form-label">Weight (kg)</label>
                                    <input type="number" class="form-control" id="weight" placeholder="Enter weight">
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="calculateBMI()">
                            <i class="fa fa-calculator mr-2"></i>Calculate BMI
                        </button>
                        <div id="bmiResult" class="mt-4"></div>
                    </div>
                </div>

                <!-- Workout and Sleep Logs -->
                <div class="row">
                    <!-- Workout Log -->
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <i class="fa fa-heartbeat mr-2"></i>Workout Log
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="workoutType" class="form-label">Workout Type</label>
                                    <select class="form-control" id="workoutType">
                                        <option value="">Select workout type</option>
                                        <option value="Running">Running</option>
                                        <option value="Swimming">Swimming</option>
                                        <option value="Cycling">Cycling</option>
                                        <option value="Gym">Gym</option>
                                        <option value="Yoga">Yoga</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="duration" class="form-label">Duration (minutes)</label>
                                    <input type="number" class="form-control" id="duration"
                                        placeholder="Enter duration">
                                </div>
                                <button type="button" class="btn btn-primary" onclick="addWorkout()">
                                    <i class="fa fa-plus mr-2"></i>Add Record
                                </button>
                                <ul id="workoutList" class="mt-3 list-group"></ul>
                            </div>
                        </div>
                    </div>

                    <!-- Sleep Log -->
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <i class="fa fa-moon-o mr-2"></i>Sleep Log
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="sleepDate" class="form-label">Date</label>
                                    <input type="date" class="form-control" id="sleepDate">
                                </div>
                                <div class="mb-3">
                                    <label for="sleepHours" class="form-label">Sleep Hours</label>
                                    <input type="number" step="0.5" class="form-control" id="sleepHours"
                                        placeholder="Enter sleep hours">
                                </div>
                                <button type="button" class="btn btn-primary" onclick="addSleepRecord()">
                                    <i class="fa fa-plus mr-2"></i>Add Record
                                </button>
                                <ul id="sleepList" class="mt-3 list-group"></ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Health Tips -->
                <div class="health-tips">
                    <h2 class="mb-4">Health Tips</h2>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="health-tip">
                                <div class="tip-icon"><i class="fa fa-apple"></i></div>
                                <h3 class="tip-title">Balanced Diet</h3>
                                <p class="tip-content">Consume adequate protein, carbohydrates, and healthy fats daily.
                                    Eat plenty of fresh fruits and vegetables to maintain a balanced diet.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="health-tip">
                                <div class="tip-icon"><i class="fa fa-moon-o"></i></div>
                                <h3 class="tip-title">Adequate Sleep</h3>
                                <p class="tip-content">Adults should ensure 7-9 hours of high-quality sleep per day.
                                    Good sleep helps the body recover and metabolize.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="health-tip">
                                <div class="tip-icon"><i class="fa fa-heartbeat"></i></div>
                                <h3 class="tip-title">Regular Exercise</h3>
                                <p class="tip-content">Engage in at least 150 minutes of moderate-intensity aerobic
                                    exercise per week, such as brisk walking, running, or swimming, and combine with
                                    strength training.</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="health-tip">
                                <div class="tip-icon"><i class="fa fa-tint"></i></div>
                                <h3 class="tip-title">Stay Hydrated</h3>
                                <p class="tip-content">Drink enough water daily to maintain body hydration. It is
                                    generally recommended to drink 8 glasses of water (about 2 liters) per day.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Health Data Chart -->
                <div class="card mt-4">
                    <div class="card-header">
                        <i class="fa fa-line-chart mr-2"></i>Health Trends
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <select class="form-control w-auto" id="chartType">
                                <option value="weight">Weight Trend</option>
                                <option value="sleep">Sleep Quality</option>
                                <option value="workout">Workout Frequency</option>
                            </select>
                        </div>
                        <div class="chart-container" style="position: relative; height:300px;">
                            <canvas id="healthChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Content -->
            <div class="col-lg-4">
                <!-- Heart Rate Monitor -->
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-heartbeat mr-2"></i>Heart Rate Monitor
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-4">
                            <svg class="progress-ring" width="120" height="120">
                                <circle class="progress-ring-circle" stroke="#E2E8F0" stroke-width="8"
                                    fill="transparent" r="50" cx="60" cy="60" />
                                <circle class="progress-ring-circle" id="heartRateCircle" stroke="#165DFF"
                                    stroke-width="8" fill="transparent" r="50" cx="60" cy="60" />
                            </svg>
                            <div class="mt-3 heart-rate-value" id="heartRateValueDisplay">70</div>
                            <div class="text-muted">Heart Rate (bpm)</div>
                        </div>

                        <div class="mb-3">
                            <label for="heartRate" class="form-label">Simulate Heart Rate</label>
                            <input type="range" class="form-range" id="heartRate" min="40" max="200" step="1"
                                value="70">
                        </div>

                        <div class="mt-4">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-sm text-muted">Resting Heart Rate</span>
                                <span class="text-sm font-medium">40-60 bpm</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-sm text-muted">Normal Heart Rate</span>
                                <span class="text-sm font-medium">60-100 bpm</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="text-sm text-muted">Exercise Heart Rate</span>
                                <span class="text-sm font-medium">100-200 bpm</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Health Goals -->
                <div class="card mt-4">
                    <div class="card-header">
                        <i class="fa fa-bullseye mr-2"></i>Health Goals
                    </div>
                    <div class="card-body">
                        <div class="health-goal">
                            <div class="goal-title">Weekly Workouts</div>
                            <div class="goal-progress">
                                <div class="goal-progress-bar" id="workoutGoal" style="width: 60%"></div>
                            </div>
                            <div class="d-flex justify-content-between mt-1 text-sm">
                                <span>Completed: 3</span>
                                <span>Goal: 5</span>
                            </div>
                        </div>

                        <div class="health-goal">
                            <div class="goal-title">Daily Steps</div>
                            <div class="goal-progress">
                                <div class="goal-progress-bar" id="stepsGoal" style="width: 72%"></div>
                            </div>
                            <div class="d-flex justify-content-between mt-1 text-sm">
                                <span>Completed: 7,254</span>
                                <span>Goal: 10,000</span>
                            </div>
                        </div>

                        <div class="health-goal">
                            <div class="goal-title">Sleep Duration</div>
                            <div class="goal-progress">
                                <div class="goal-progress-bar" id="sleepGoal" style="width: 94%"></div>
                            </div>
                            <div class="d-flex justify-content-between mt-1 text-sm">
                                <span>Completed: 7.5 hours</span>
                                <span>Goal: 8 hours</span>
                            </div>
                        </div>

                        <button type="button" class="btn btn-primary w-100 mt-4">
                            <i class="fa fa-plus mr-2"></i>Set New Goal
                        </button>
                    </div>
                </div>

                <!-- Nutrition Recommendations -->
                <div class="card mt-4">
                    <div class="card-header">
                        <i class="fa fa-cutlery mr-2"></i>Today's Nutrition Recommendations
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-3">
                            <img src="https://picsum.photos/id/139/300/200" alt="Healthy diet" class="rounded w-100">
                        </div>
                        <h4 class="mb-2">Balanced Breakfast Combination</h4>
                        <p class="text-muted mb-3">Based on your BMI and activity level, the following breakfast
                            combination is recommended:</p>
                        <ul class="list-group">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span><i class="fa fa-check-circle text-success mr-2"></i>Whole Grain Bread</span>
                                <span>2 slices</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span><i class="fa fa-check-circle text-success mr-2"></i>Egg</span>
                                <span>1 piece</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span><i class="fa fa-check-circle text-success mr-2"></i>Low-Fat Yogurt</span>
                                <span>1 cup</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span><i class="fa fa-check-circle text-success mr-2"></i>Fruit</span>
                                <span>1 serving</span>
                            </li>
                        </ul>
                        <button type="button" class="btn btn-outline-primary w-100 mt-3">View More
                            Recommendations</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-dark text-white py-3 text-center">
        <div class="container">
            <p>&copy; 2025 Health Bot. All rights reserved.</p>
            <div class="mt-2">
                <a href="#" class="text-white mx-2"><i class="fa fa-facebook"></i></a>
                <a href="#" class="text-white mx-2"><i class="fa fa-twitter"></i></a>
                <a href="#" class="text-white mx-2"><i class="fa fa-instagram"></i></a>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script src="./scripts/skeleton.js"></script>
    <script>
        // Initialize display
        document.addEventListener('DOMContentLoaded', function () {
            updateHeartRateDisplay(70);
            initChart();

            // Fade-in animation
            const elements = document.querySelectorAll('.card, .stats-card, .health-tip');
            elements.forEach((el, index) => {
                setTimeout(() => {
                    el.classList.add('fade-in');
                }, 100 * index);
            });
        });

        // Calculate BMI
        function calculateBMI() {
            const height = parseFloat(document.getElementById('height').value) / 100;
            const weight = parseFloat(document.getElementById('weight').value);

            if (height > 0 && weight > 0) {
                const bmi = (weight / (height * height)).toFixed(1);
                document.getElementById('bmiDisplay').textContent = bmi;

                let bmiClass = '';
                let bmiMessage = '';

                if (bmi < 18.5) {
                    bmiClass = 'bmi-underweight';
                    bmiMessage = 'Underweight, need to increase nutritional intake';
                } else if (bmi >= 18.5 && bmi < 24) {
                    bmiClass = 'bmi-normal';
                    bmiMessage = 'Normal weight, keep it up';
                } else if (bmi >= 24 && bmi < 28) {
                    bmiClass = 'bmi-overweight';
                    bmiMessage = 'Overweight, recommend increasing exercise';
                } else {
                    bmiClass = 'bmi-obese';
                    bmiMessage = 'Obese, please pay attention to diet and strengthen exercise';
                }

                const resultElement = document.getElementById('bmiResult');
                resultElement.innerHTML = `
                    <div class="bmi-result ${bmiClass}">
                        <div class="font-bold text-lg">BMI: ${bmi}</div>
                        <div class="text-sm mt-1">${bmiMessage}</div>
                    </div>
                `;

                // Update chart
                updateChart('weight', {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    data: [72, 71.8, 71.5, 71.9, 72.3, 71.7, weight]
                });
            } else {
                document.getElementById('bmiResult').innerHTML = `
                    <div class="bmi-result" style="background-color: rgba(255, 92, 92, 0.1); color: #DC2626;">
                        Please enter valid height and weight
                    </div>
                `;
            }
        }

        // Add workout record
        function addWorkout() {
            const type = document.getElementById('workoutType').value;
            const duration = document.getElementById('duration').value;

            if (type && duration) {
                const list = document.getElementById('workoutList');
                const item = document.createElement('li');
                item.className = 'list-group-item d-flex justify-content-between align-items-center';

                const date = new Date().toLocaleDateString();
                item.innerHTML = `
                    <div>
                        <div class="font-medium">${type}</div>
                        <div class="text-sm text-muted">${date}</div>
                    </div>
                    <span class="badge bg-primary rounded-pill">${duration} minutes</span>
                `;

                list.appendChild(item);
                updateWorkoutCount();

                // Update chart
                updateChart('workout', {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    data: [0, 1, 0, 1, 0, 0, 1]
                });

                // Reset form
                document.getElementById('workoutType').value = '';
                document.getElementById('duration').value = '';
            }
        }

        // Update workout count
        function updateWorkoutCount() {
            const count = document.getElementById('workoutList').children.length;
            document.getElementById('workoutCount').textContent = count;

            // Update progress bar
            const goal = 5;
            const percentage = Math.min((count / goal) * 100, 100);
            document.getElementById('workoutGoal').style.width = `${percentage}%`;
        }

        // Add sleep record
        function addSleepRecord() {
            const date = document.getElementById('sleepDate').value || new Date().toISOString().split('T')[0];
            const hours = document.getElementById('sleepHours').value;

            if (hours) {
                const list = document.getElementById('sleepList');
                const item = document.createElement('li');
                item.className = 'list-group-item d-flex justify-content-between align-items-center';

                const formattedDate = new Date(date).toLocaleDateString();
                item.innerHTML = `
                    <div>
                        <div class="font-medium">${formattedDate}</div>
                        <div class="text-sm text-muted">Sleep Duration</div>
                    </div>
                    <span class="badge bg-primary rounded-pill">${hours} hours</span>
                `;

                list.appendChild(item);
                updateSleepAverage();

                // Update chart
                updateChart('sleep', {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    data: [7.2, 6.8, 7.5, 8.1, 6.5, 8.5, parseFloat(hours)]
                });

                // Update progress bar
                const goal = 8;
                const percentage = Math.min((parseFloat(hours) / goal) * 100, 100);
                document.getElementById('sleepGoal').style.width = `${percentage}%`;

                // Reset form
                document.getElementById('sleepDate').value = '';
                document.getElementById('sleepHours').value = '';
            }
        }

        // Update average sleep time
        function updateSleepAverage() {
            const items = document.getElementById('sleepList').children;
            if (items.length === 0) {
                document.getElementById('sleepAvg').textContent = '-';
                return;
            }

            let totalHours = 0;
            for (let i = 0; i < items.length; i++) {
                const hoursText = items[i].querySelector('.badge').textContent;
                const hours = parseFloat(hoursText);
                totalHours += hours;
            }

            const avgHours = (totalHours / items.length).toFixed(1);
            document.getElementById('sleepAvg').textContent = `${avgHours} hours`;
        }

        // Update heart rate display
        document.getElementById('heartRate').addEventListener('input', function () {
            const heartRate = parseInt(this.value);
            document.getElementById('heartRateValueDisplay').textContent = heartRate;
            document.getElementById('heartRateDisplay').textContent = heartRate;
            updateHeartRateDisplay(heartRate);
        });

        // Update heart rate circle
        function updateHeartRateDisplay(heartRate) {
            const maxHeartRate = 200;
            const percentage = (heartRate / maxHeartRate) * 100;
            const circumference = 2 * Math.PI * 50;
            const offset = circumference - (percentage / 100) * circumference;

            const circle = document.getElementById('heartRateCircle');
            circle.style.strokeDasharray = `${circumference} ${circumference}`;
            circle.style.strokeDashoffset = offset;

            // Change color
            let color = '#165DFF'; // Default blue
            if (heartRate < 60) color = '#0284C7'; // Low heart rate - light blue
            else if (heartRate > 100) color = '#DC2626'; // High heart rate - red

            circle.style.stroke = color;
        }

        // Initialize chart
        let healthChart;
        function initChart() {
            const ctx = document.getElementById('healthChart').getContext('2d');
            healthChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    datasets: [{
                        label: 'Weight (kg)',
                        data: [72, 71.8, 71.5, 71.9, 72.3, 71.7, 72],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });

            // Chart type switch
            document.getElementById('chartType').addEventListener('change', function () {
                const type = this.value;
                if (type === 'weight') {
                    updateChart('weight', {
                        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        data: [72, 71.8, 71.5, 71.9, 72.3, 71.7, 72]
                    });
                } else if (type === 'sleep') {
                    updateChart('sleep', {
                        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        data: [7.2, 6.8, 7.5, 8.1, 6.5, 8.5, 7.5]
                    });
                } else if (type === 'workout') {
                    updateChart('workout', {
                        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        data: [0, 1, 0, 1, 0, 0, 1]
                    });
                }
            });
        }

        // Update chart
        function updateChart(type, data) {
            let label, color, bgColor;

            if (type === 'weight') {
                label = 'Weight (kg)';
                color = '#165DFF';
                bgColor = 'rgba(22, 93, 255, 0.1)';
            } else if (type === 'sleep') {
                label = 'Sleep Hours';
                color = '#36D399';
                bgColor = 'rgba(54, 211, 153, 0.1)';
            } else if (type === 'workout') {
                label = 'Workout Count';
                color = '#FF9F43';
                bgColor = 'rgba(255, 159, 67, 0.1)';
            }

            healthChart.data.labels = data.labels;
            healthChart.data.datasets[0].label = label;
            healthChart.data.datasets[0].data = data.data;
            healthChart.data.datasets[0].borderColor = color;
            healthChart.data.datasets[0].backgroundColor = bgColor;
            healthChart.update();
        }
    </script>
</body>

</html>